<template>
    <view class="container">
        <!-- 顶部栏 -->
       <uni-nav-bar dark fixed shadow background-color="#667eea" status-bar left-icon="settings" title="用户管理"
            @clickLeft="handleSetting" right-text="返回" @clickRight="uni.navigateBack()" />

        <!-- 新增按钮 -->
        <view class="add-box">
            <button type="primary" size="mini" @click="toAdd">+ 新增用户</button>
        </view>

        <!-- 用户列表 -->
        <uni-list>
            <uni-list-item v-for="item in userList" :key="item.id" :title="item.name" :note="item.phone"
                clickable @click="toEdit(item)">
                <template v-slot:footer>
                    <text class="del" @click.stop="doDel(item.id)">删除</text>
                </template>
            </uni-list-item>
        </uni-list>

        <!-- 空态 -->
        <view v-if="userList.length === 0" class="empty">暂无用户</view>

        <!-- 新增/编辑弹窗 -->
        <!-- <uni-popup ref="popup" type="dialog">
            <uni-popup-dialog mode="input" :title="form.id ? '编辑用户' : '新增用户'" :value="form.name" placeholder="请输入姓名"
                @confirm="confirm" />
        </uni-popup> -->
        <edit @submit="confirm" ref="drawer" :password="password" :userInfo="userInfo" />

         <leftSetting ref="settingRef" />
    </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import uniReq from '@/api/uniReq';
import leftSetting from '@/components/leftSetting/leftSetting.vue'
import edit from './edit.vue'

const userInfo = ref({})

const password = ref('')
const settingRef = ref(null)// 左侧设置弹窗
const drawer = ref()// 新增/编辑弹窗
const userList = ref([]) // 用户列表
const params = ref({
    pageIndex: 1,
    pageSize: 50,
    name: ''
})


const getList = async () => {
    const res = await uniReq({
            url: '/user/list',
            method: 'POST',
            data: params.value
        })
    if (res.code === 200) {
        userList.value = res.data.records
    }
}

// 删除用户
const doDel = async (id) => {
    uni.showModal({
        title: '确认删除',
        content: '确定删除该用户吗？',
        success: async (res) => {
            if (res.confirm) {
                const res = await uniReq({
                    url: '/user/delete?id='+id,
                    method: 'POST',
                    // data: {
                    //     id
                    // }
                })
                if (res.code === 200) {
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success'
                    })
                    getList()
                }
            }
        }
    })
}

// 新增/编辑用户
const confirm = async (form) => {
    console.log(form);
    const res = await uniReq({
        url: form.id ? '/user/update' : '/user/add',
        method: 'POST',
        data: form
    })
    if (res.code === 200) {
        uni.showToast({
            title: form.id ? '编辑成功' : '新增成功',
            icon: 'success'
        })
        getList()
        form.value = {
            id: '',
            name: '',
            phone: ''
        }
        drawer.value.close()
    }
}


// 新增用户
const toAdd = () => {
    userInfo.value = {}
    password.value = null
    drawer.value.open()
}

// 编辑用户
const toEdit = (item) => {
    userInfo.value = item
    password.value = item.password
    drawer.value.open()
}

onMounted(() => {
    getList()
})

const handleSetting = () => {
    settingRef.value.open()
}

</script>

<style lang="scss" scoped>
.container {
    padding: 0 30rpx;
}

.add-box {
    display: flex;
    justify-content: flex-end;
    margin: 20rpx 0;
}

.del {
    display: inline-block;
    height: 80rpx;
    line-height: 80rpx;
    color: #e54d42;
    font-size: 26rpx;
    margin-left: 20rpx;
}

.empty {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    margin-top: 100rpx;
}

:deep(.uni-navbar__header-btns-left) {
    width: 60rpx !important;
}

:deep(.uni-navbar__header-btns-right) {
    justify-content: flex-start !important;
}
</style>
